import store from 'store/index.js'

class WindowSizeClass {
  width = null
  size = null

  constructor () {
    this.updateSize()
  }

  // onresize事件
  onresize () {
    window.onresize = this.updateSize.bind(this)
  }

  // 更新Size
  updateSize () {
    this.width = this.getWidth()
    this.size = this.getSize()
    store.commit('SetWindowWidth', this.width)
    store.commit('SetWindowSzie', this.size)
  }

  // 返回window的宽度
  getWidth () {
    return window.innerWidth || ((document.body) && (document.body.clientWidth)) || 1280
  }

  // 返回对应宽度的size值
  getSize () {
    if (this.width > 1920) return 'xl'
    else if (this.width > 1280) return 'lg'
    else if (this.width > 960) return 'md'
    else if (this.width > 600) return 'sm'
    else return 'xs'
  }
}

const WindowSize = new WindowSizeClass()
export { WindowSize }
